<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/dishes.css">
    <link rel="stylesheet" href="/lib/cropper/cropper.css">
</head>

<body>
    <div class="container">
        <form class="layui-form " id="form-add" action="">
            <div class="layui-form-item" style=" position: relative;">
                <label class="layui-form-label categoryName"><span class="red">*</span>菜品名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="uname" required lay-verify="required" placeholder="请填写菜品名称" autocomplete="off" class="layui-input">
                </div>

                <label class="layui-form-label categoryName"><span class="red">*</span>菜品分类</label>
                <div class="layui-input-block width">
                    <select name="cate_id" lay-filter="categoryId" lay-verify="required">
                        <option value=""></option>
                        <option value="0">北京</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label categoryName"><span class="red">*</span>菜品价格</label>
                <div class="layui-input-inline">
                    <input type="text" name="price" required lay-verify="required" placeholder="请填写菜品价格" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="position:relative ;">

                <div class="flavorBox">
                    <label class="flavor-left" style="margin-left: 22px
                ;">口味配置做法</label>
                    <button style="margin-left: -10px
                ;" type="button" class="layui-btn layui-btn-warm" id="flavor-btn">+
                        添加口味</button>
                    <!-- 口味下拉菜单 -->
                    <div class="dis_flavor ">
                        <!-- 标题 -->
                        <div class="title">口味名（3个字内）口味标签（输入标签回车添加）</div>
                        <!-- 选择框 -->
                        <div class="new">
                            <div class="count">
                                <!-- 下拉弹框 -->
                                <div class="layui-inline" style="width: 150px;">
                                    <input name="" placeholder="请输入口味" class="layui-input" id="demo2" autocomplete="off">
                                </div>
                                <div class="my-right"></div>
                                <a href="javascript:;" class="flavorDel red">删除</a>
                            </div>
                        </div>
                        <!-- 添加口味 -->
                        <button type="button" class="layui-btn layui-btn-warm my-btn" data-index='1'>添加口味</button>
                    </div>
                </div>
            </div>
            <div class="layui-form-item cateImg">
                <!-- 左侧的 label -->
                <label class="layui-form-label " style="width: 180px; "><span style="color: red;">*</span>菜品图片:</label>
                <!-- 选择封面区域 -->
                <div class="layui-input-block cover-box">
                    <!-- 左侧裁剪区域 -->
                    <div class="cover-left" id="btnChooseImage">
                        <a href="javascript:;" style="line-height: 160px;">上传图片</a>
                        <img id="image" src="/images/c1dd32bda12101eb216f84a50de705f.png" alt="" style="position:relative;top: -160px;width: 200px;height: 160px;" />
                    </div>
                </div>
                <input type="file" id="coverFile" style="display: none;" accept="image/png,image/jpeg,image/gif" />
            </div>
            <div class="layui-form-item">
            </div>
            <div class="layui-form-item">
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label categorName">菜品描述：</label>
                <div class="layui-input-block mt">
                    <textarea name="desc" placeholder="菜品描述,最高输入200字" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="position:relative;">
                    <div class="btns">
                        <a class="layui-btn btnReset">取消</a>
                        <button type="submit" class="layui-btn layui-btn-primary " lay-filter="formDemo">保存</button>
                        <button type="reset" class="layui-btn btn-black">继续添加菜品</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script src="/lib/template-web.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/lib/jquery.js"></script>
    <script src="/js/dishes.js"></script>
    <script src="/lib/cropper/Cropper.js"></script>
    <script src="/lib/cropper/jquery-cropper.js"></script>
    <script src="/js/addDishes.js"></script>
    <!-- <script>
        layui.use('form', function() { //此段代码必不可少
            var form = layui.form;
            form.render();
        });
        var $image = $('#image')
        $('#btnChooseImage').on('click', function() {

            $('#coverFile').click()
        })
        let amgs;
        // 当用户选择了新文件,则更换裁剪区域的图片
        $('#coverFile').on('change', function() {
                // 获取用户选择的文件列表(文件选择框dom对象,files)
                const fileList = this.files
                if (fileList.length <= 0) {
                    return layui.layer.msg('请选择图片文件', {
                        icon: 5
                    })
                }
                // 获取用户选择的文件
                // 索引为0是图片的信息,索引1是选项的length
                const file = fileList[0]
                    // console.log(file);
                    // URL.createObjectURL 获取文件对象在内存中的url地址
                const newImgUrl = URL.createObjectURL(file)
                $image.attr('src', newImgUrl) // 重新设置图片的路径

                $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                    width: 200,
                    height: 160
                })
                let form = new FormData()
                form.append('file', file);
                $.ajax({
                    method: 'post',
                    data: form,
                    contentType: false,
                    processData: false,
                    url: 'http://121.4.102.44:8083/common/upload',
                    success: function(res) {
                        amgs = res.data
                    },
                })
            })
            // 上传图片
            //渲染下拉框
        initCate()

        function initCate() {
            $.ajax({
                url: 'http://121.4.102.44:8083/category/list',
                success(res) {
                    // if (res.type !== 1) {
                    //     return layer.msg(res.message, { icon: 5 })
                    // }
                    const htmlStr = template('tpl-cate', res)
                        // console.log(htmlStr);
                    $('[name=cate_id]').html(htmlStr)
                    layui.form.render()
                }
            })
        }
        let caid;
        layui.form.on('select(categoryId)', function(data) {
            caid = data.value
        });
        // console.log(caid);
        //添加菜品
        $('#form-add').on('submit', function(e) {
            //获取所有渲染出来口味右边框的值，截取字符串拼接起来
            e.preventDefault()
            let arr = []
            $('.item').each((e, V) => {
                console.log($(V).html().length);
                if ($(V).html().length < 11) {
                    arr.push($(V).html().substring(0, 2))
                } else {
                    arr.push($(V).html().substring(0, 3))
                }
            });
            // console.log(arr);
            layui.form.render()
            $.ajax({
                method: 'post',
                url: 'http://121.4.102.44:8083/dish',
                contentType: 'application/json;charset=utf-8',
                data: JSON.stringify({
                    categoryId: caid,
                    name: $('[name=uname]').val(),
                    price: $('[name=price]').val(),
                    image: amgs,
                    status: '1',
                    flavors: [{
                        name: "甜味",
                        value: JSON.stringify(arr),
                        showOption: false
                    }],
                    code: "",
                    description: $('textarea').val()
                }),
                success(res) {
                    if (res.code !== 1) {
                        layer.msg('添加失败', res.msg)
                    }
                    layer.msg(res.msg)
                        // location.href = '/index.html#/add'
                        // window.location.reload();
                    console.log(res);
                }
            })
        })
    </script> -->
    <script type="text/html" id="tpl-cate">
        {{each data}}
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each }}
    </script>
    <script type="text/html" id="xrym">
        {{each records}}
        <div class="cates">
            <span class="item">{{$value.name}}<i>x</i></span>
        </div>
        {{/each}}
    </script>
    <script type="text/html" id="xrym1">
        {{each wendu}}
        <div class="cates">
            <span class="item">{{$value.name}}<i>X</i></span>
        </div>
        {{/each}}
    </script>
    <script type="text/html" id="xrym2">
        {{each jikou}}
        <div class="cates">
            <span class="item">{{$value.name}}<i>X</i></span>
        </div>
        {{/each}}
    </script>
    <script type="text/html" id="xrym3">
        {{each ladu}}
        <div class="cates">
            <span class="item">{{$value.name}}<i>X</i></span>
        </div>
        {{/each}}
    </script>
</body>

</html>